<!--
 * @Author: 码上talk|RC
 * @Date: 2021-09-17 15:12:16
 * @LastEditTime: 2021-10-03 17:54:58
 * @LastEditors: 码上talk|RC
 * @Description: 
 * @FilePath: /ma-portal/subpackage/default/pages/_test/index.vue
 * @微信:  13680065830
 * @邮箱:  3189482282@qq.com
 * @oops: Just do what I think it is right
-->
<template>
  <view class="page page--column _test">
    <view class="t-search">
      <input type="text" placeholder="搜索" />
    </view>
    <div class="col-main t-main">
      <div class="input-passwd" :class="{'input-passwd--visible': type === 'text'}">
        <input type="text" placeholder="输入密码" v-model="passwd" />
        <text v-if="type === 'passwd'">{{passwd.replace(/\S/g, '*')}}</text>
      </div>
    </div>
  </view>
</template>

<script>
import listPage from '@/components/list-page';
export default {
  components: {
    listPage
  },
  data () {
    return {
      type: 'passwd',
      passwd: '',
      page: {
        config: {
          entity: 'Member',
          action: 'page',
          enablePull: true
        }
      }
    }
  }
}
</script>

<style lang="less">
._test {
  .t-search {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 70rpx;
    background: white;
  }
  .t-main {
    .input-passwd {
      position: relative;
      input {
        color: RGBA(0, 0, 0, 0);
      }
      text {
        position: absolute;
        top: 50%;
        left: 0;
        transform: translateY(-50%);
      }
      &--visible {
        input {
          color: RGBA(0, 0, 0);
        }
      }
    }
  }
}
</style>